<template lang="jade">
    table(class="table table-bordered")
        thead
            tr
                th(v-for="item in nameList") {{item.name}}
                th(style="width:100px") 价格
                th(style="width:100px") 备注
        tbody
            tr(v-for="productSku in productSkuList")
                td(v-for="propertyItem in productSku.propertyItems") {{propertyItem.propertyItemName}}
                td
                    input(v-model="productSku.price",class="form-control input-sm")
                td
                    input(v-model="productSku.remark",class="form-control input-sm")
            tr(v-if="productSkuList.length===0")
                td(colspan="100") 暂无数据


</template>
<script>
    import ProductSku from '../models/product-sku';
    import _ from 'lodash';
    export default {
        data(){
            return {
                productSkuList:[]
            }
        },
        props:{
            skuElements: {type:Array,default:()=>{return []}},
        },
        model:{prop:'skuElements',event:'update'},
        computed:{
            /**
             * 属性名（name）和属性id集合
             */
            nameList(){
                if(this.productSkuList.length==0)return [];
                var productSku = this.productSkuList[0];
                var  nameList =  _.map(productSku.propertyItems, (propertyItem)=> {
                    return {
                            name:propertyItem.propertyName,
                            id:  propertyItem.propertyId
                        };
                });
                return nameList;
            }
        },
        watch: {
            'skuElements':()=>{
                this.sku_element_list_to_product_sku_list();
            }
        },
        methods:{
            get_product_sku_list(){
                return this.productSkuList;
            },
            sku_element_list_to_product_sku_list(skuElements){
                var skuGroups = _.groupBy(skuElements, (element)=>{return element.skuId});

                this.productSkuList = [];
                for(var key in skuGroups){
                    var propertyItems = skuGroups[key];
                    var productSku = new ProductSku();

                    var first = propertyItems[0];
                    productSku.price = first.price;
                    productSku.remark = first.remark;

                    productSku.skuId = key;
                    productSku.propertyItems = _.map(propertyItems, (propertyItem)=>{
                        return propertyItem;
                    });
                    
                    this.productSkuList.push(productSku);
                }
            },
        },
        mounted(){
            this.sku_element_list_to_product_sku_list(this.skuElements);
        }
    }
</script>